<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Axios</title>
	</head>
	<body>
		<h1>Axios练习</h1>
		<!-- 引入JS文件 -->
		<script src="../js/axios.js"></script>
		<script>
			/**
			 * 注意事项:
			 * 		1.Axios将原来的嵌套的结构,改为链式加载方式
			 *    2.回调函数中的result是promise对象, 获取返回值:result.data
			 * 
			 * 发起Ajax请求:
			 * 	1. GET请求获取数据
			 */
			/* $.get("url",data,function(data){
					
					$.get("url2",data,function(data2){
						
							$.get("url3",data,function(data3){
								
							})
					})
			}) */
			/* 
				链式加载  解决了回调地狱问题
				axios.get("url",data)
					 .then(function(1))
					 .then(function(2))
					 .then(function(3)) */
			
			axios.get("http://localhost:8090/axios/getUser")
					 .then(function(result){ //promise对象
						//获取服务器返回值  promise.data
						 console.log(result)
						 console.log(result.data)
					 })
			
			/**
			 *  GET请求-简单参数的写法
			 * 需求: 根据ID查询数据
			 * URL: http://localhost:8090/axios/getUserById?id=100
			 * then(): 回调函数通过then返回 结构
			 */
			axios.get("http://localhost:8090/axios/getUserById?id=100")
					 .then(function(result){
						 console.log(result.data)
					 })
			
			/**
			 * restFul风格实现业务传参 
			 * 需求: 根据name/age查询数据
			 * URL: http://localhost:8090/axios/user/tomcat/18
			 * 注意: 模版字符串优化参数  ``
			 */
			let name = "mysql"
			let age = 20
			axios.get(`http://localhost:8090/axios/user/${name}/${age}`)
					 .then(function(result){
						 console.log(result.data)
					 })
			
			
			
			
			
		</script>
	</body>
</html>
